<template>
  <Card style="height:900px">
    <div>贷款产品</div>
    <Form ref="formInline" :model="formDatas" :label-width="500" :rules="ruleInline" style="margin-top: 10px;">
      <FormItem label="版本号:">
        <Input v-model="formDatas.productVersion" style="width: 400px;" placeholder="请输入" disabled="disabled"></Input>
      </FormItem>
      <FormItem label="描述:">
        <Input v-model="formDatas.remark" style="width: 400px;" placeholder="请输入"></Input>
      </FormItem>
      <FormItem label="渠道:">
        <RadioGroup v-model="formDatas.channel">
          <Radio v-for="item in channels" :key="item.channelCode" :label="item.channelCode">{{ item.channelName }}</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="期限:">
        <RadioGroup v-model="formDatas.tenor">
          <Radio v-for="item in terms" :key="item.id" :label="item.value">{{ item.term}}</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="等级:">
        <RadioGroup v-model="formDatas.grade">
          <Radio v-for="item in grades" :key="item.customerType" :label="item.customerType">{{ item.customerTypeDesc }}</Radio>
        </RadioGroup>
      </FormItem>
      <Row>
        <Col span="11">
        <FormItem label="宽限日:" prop="graceDays">
          <Input v-model="formDatas.graceDays" style="width: 200px;" placeholder="请输入"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="11">
        <FormItem label="计费周期:">
          <Select v-model="formDatas.cycle" style="width: 200px;">
            <Option v-for="item in billingCycleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="11">
        <FormItem label="还款顺序:">
          <Select v-model="formDatas.paymentSeq" style="width: 200px;">
            <Option v-for="item in repaySeqList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="11">
        <FormItem label="还款计算方式:">
          <Select v-model="formDatas.amortCode" style="width: 200px;">
            <Option v-for="item in amortMethodList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>

        <Col span="11">
        <FormItem label="提前结清费:">
          <Select v-model="formDatas.preTerminationFeeCode" style="width: 200px;">
            <Option v-for="item in preSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="11">
        <FormItem label="平台费:">
          <Select v-model="formDatas.platformFeeCode" style="width: 200px;">
            <Option v-for="item in ptSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>

        <Col span="11">
        <FormItem label="杂费:">
          <Select v-model="formDatas.miscFeeCode" style="width: 200px;">
            <Option v-for="item in miscSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="11">
        <FormItem label="管理费:">
          <Select v-model="formDatas.manageFeeCode" style="width: 200px;">
            <Option v-for="item in mngSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="11">
        <FormItem label="滞纳金:">
          <Select v-model="formDatas.lateFeeCode" style="width: 200px;">
            <Option v-for="item in lateSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="11">
        <FormItem label="违约金:">
          <Select v-model="formDatas.penaltyFeeCode" style="width: 200px;">
            <Option v-for="item in penaltySelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="11">
        <FormItem label="服务费:">
          <Select v-model="formDatas.consultingFeeCode" style="width: 200px;">
            <Option v-for="item in consultSelectData" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <FormItem>
        <div>
          <Button type="primary" @click="saveItem()">确定</Button>
          <Button type="primary" @click="resetInput()">重置</Button>
          <Button type="primary" @click="handleGoBack">返回</Button>
        </div>
      </FormItem>
    </Form>
  </Card>
</template>

<script>
export default {
  data () {
    return {
      $ajax: null,
      // 1. 封装实体对象
      formDatas: {
        channel: '',
        tenor: '',
        productVersion: '',
        grade: '',
        remark: '',
        paymentSeq: '',
        amortCode: '',
        cycle: '',
        graceDays: '',
        organization: ''
      },

      ruleInline: {
        graceDays: [
          { pattern: this.$util.regExpNum, message: '宽限日不能为非数字', trigger: 'blur' }
        ]
      }, // 校验规则
      // 还款计算方式
      amortMethodList: [

      ],
      channels: [],
      terms: [],
      grades: [],
      // 还款顺序
      repaySeqList: [

      ],
      miscSelectData: [],
      ptSelectData: [],
      consultSelectData: [],
      mngSelectData: [],
      lateSelectData: [],
      penaltySelectData: [],
      preSelectData: [],
      // 计费周期
      billingCycleList: [
        {
          value: '0004',
          label: '月'
        }
      ]

    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initPage()
  },

  computed: {

  },

  methods: {

    // 返回上一页
    handleGoBack () {
      this.$router.back()
    },
    resetInput () {
      this.formDatas.remark = ''
      this.formDatas.channel = ''
      this.formDatas.tenor = ''
      this.formDatas.grade = ''
      this.formDatas.organization = ''
      this.formDatas.graceDays = ''
      this.formDatas.cycle = ''
      this.formDatas.paymentSeq = ''
      this.formDatas.amortCode = ''
      this.formDatas.preTerminationFeeCode = ''
      this.formDatas.platformFeeCode = ''
      this.formDatas.miscFeeCode = ''
      this.formDatas.penaltyFeeCode = ''
      this.formDatas.manageFeeCode = ''
      this.formDatas.lateFeeCode = ''
      this.formDatas.consultingFeeCode = ''
    },
    initPage () {
      var vm = this
      vm.formDatas.productVersion = this.$route.query.version
      vm.formDatas.productTypeName = this.$route.query.productTypeName // 产品大类cn名  如：云科谷
      vm.formDatas.productType = this.$route.query.productType

      this.$ajax.post(vm.$appContext.marvels_core_product + 'product/param/product/service/getInitInfo', vm.formDatas).then(res => {
        if (res.data.code === 'success') {
          vm.amortMethodList = res.data.data.amortMethodList
          vm.repaySeqList = res.data.data.repaySeqList
          vm.channels = res.data.data.channels// 渠道
          // 期限
          if (res.data.data.terms && res.data.data.terms.length > 0) {
            res.data.data.terms.forEach(item => {
              vm.terms.push({
                id: item.id,
                term: item.term + '期',
                value: item.term })
            })
          }
          vm.grades = res.data.data.grades// 等级
          vm.miscSelectData = res.data.data.miscFeeMap
          vm.ptSelectData = res.data.data.ptFeeMap
          vm.consultSelectData = res.data.data.consultFeeMap
          vm.mngSelectData = res.data.data.mngFeeMap
          vm.lateSelectData = res.data.data.lateFeeMap
          vm.penaltySelectData = res.data.data.penaltyFeeMap
          vm.preSelectData = res.data.data.preFeeMap
        }
      }).catch(er => {
        vm.$Message.warning(er)
      })
    },

    saveItem () {
      var vm = this
      vm.$refs.formInline.validate(valid => {
        if (valid) {
          if (vm.formDatas.cycle === '') {
            vm.$Message.warning('请选择计费周期')
            return
          }
          if (vm.formDatas.paymentSeq === '') {
            vm.$Message.warning('请选择还款顺序')
            return
          }
          if (vm.formDatas.amortCode === '') {
            vm.$Message.warning('请选择还款计算方式')
            return
          }

          this.$ajax.post(vm.$appContext.marvels_core_product + 'product/param/product/service/save', vm.formDatas).then(res => {
            if (res.data.code === 'success') {
              vm.$Message.success('保存成功')
              // vm.$router.push('parameter/list/product')
            } else {
              vm.$Message.warning(res.data.message)
            }
          }).catch(er => {
            vm.$Message.warning(er)
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
</style>
